import Utils from 'common/utils';
import { observable, computed, action } from 'mobx';


const stringExtendStyle = (array) => {
  let rs = [];
  array.forEach(item => {
    switch (item.key) {
      case 'rotate': {
        rs.push(`rotate(${item.val}deg)`);
        break;
      }
      case 'rotateX': {
        rs.push(`rotateX(${item.val}deg)`);
        break;
      }
      case 'rotateY': {
        rs.push(`rotateY(${item.val}deg)`);
        break;
      }
      case 'brightness': {
        rs.push(`brightness(${item.val}%)`);
        break;
      }
      case 'blur': {
        rs.push(`blur(${item.val}px)`);
        break;
      }
      case 'contrast': {
        rs.push(`contrast(${item.val}%)`);
        break;
      }
      case 'saturate': {
        rs.push(`saturate(${item.val}%)`);
        break;
      }
      case 'grayscale': {
        rs.push(`grayscale(${item.val}%)`);
        break;
      }
      case 'hueRotate': {
        rs.push(`hue-rotate(${item.val}deg`);
        break;
      }
    }
  });
  return rs.join('');

};

export default class Text {
  @observable left = 0;
  @observable top = 0;
  @observable background = 'white';
  @observable letterSpacing = 0;
  @observable lineHeight = 1.5;
  @observable fontSize = 16;
  @observable fontWeight = 'normal';
  @observable fontStyle = 'normal';
  @observable textDecoration = 'none';
  @observable textAlign = 'left';
  @observable vertical = '';
  @observable textStrokeWidth = 1;
  @observable textStrokeColor = '';

  @observable opacity = 1;
  @observable brightness = 100;
  @observable blur = 0;
  @observable contrast = 100;
  @observable saturate = 100;
  @observable grayscale = 0;
  @observable hueRotate = 0;



  constructor({ ...data }) {
    this.init({
      ...data,
      label: '图片',
      type: 'image',
    });
  }

  @computed get styleWrapper() {
    return {
      left: this.left,
      top: this.top,
      background: this.background,
    };
  }
  @computed get styleText() {
    return {
      letterSpacing: this.letterSpacing,
      lineHeight: this.lineHeight,
      fontSize: this.fontSize,
      fontWeight: this.fontWeight,
      fontStyle: this.fontStyle,
      textDecoration: this.textDecoration,
      textAlign: this.textAlign,
      opacity: this.opacity,
      writingMode: this.vertical,
      WebkitTextStrokeColor: this.textStrokeColor,
      WebkitTextStrokeWidth: this.textStrokeWidth,
      filter: stringExtendStyle([
        {
          key: 'brightness',
          val: this.brightness,
        },
        {
          key: 'blur',
          val: this.blur,
        },
        {
          key: 'contrast',
          val: this.contrast,
        },
        {
          key: 'saturate',
          val: this.saturate,
        },
        {
          key: 'grayscale',
          val: this.grayscale,
        },
        {
          key: 'hueRotate',
          val: this.hueRotate,
        },
      ]),
      transform: stringExtendStyle([
        {
          key: 'rotate',
          val: this.rotate,
        },
        {
          key: 'rotateX',
          val: this.rotateX,
        },
        {
          key: 'rotateY',
          val: this.rotateY,
        }
      ])
    };
  }


  @action init({ label, ...other }) {
    this.label = label;
    this.title = Utils.guid(label);
    Object.keys(other).map(key => {
      this[key] = other[key];
    });
  }

  @action setAttr(key, val) {
    this[key] = val;
  }



  @action addNumber(label) {
    switch (label) {
      case '字号' : this.fontSize = this.fontSize + 1; break;
      case '字距' : this.letterSpacing = this.letterSpacing + 1; break;
      case '行距' : this.lineHeight = (this.lineHeight * 10 + 1) / 10; break;
      case '描边' : this.textStrokeWidth = this.textStrokeWidth + 1; break;
    }
  }

  @action decNumber(label) {
    switch (label) {
      case '字号' : this.fontSize = this.fontSize - 1; break;
      case '字距' : this.letterSpacing = this.letterSpacing - 1; break;
      case '行距' : this.lineHeight = (this.lineHeight * 10 - 1) / 10; break;
      case '描边' : this.textStrokeWidth = this.textStrokeWidth - 1; break;
    }
  }

  // 文字排列方式
  @action textHorizontal(ind) {
    this.vertical = ind === 0 ? '' : 'vertical-lr';
  }

  @action textStrong() {
    this.fontWeight = this.fontWeight === 'normal' ? 'bold' : 'normal';
  }
  @action textItalic() {
    this.fontStyle = this.fontStyle === 'normal' ? 'italic' : 'normal';
  }
  @action textUnderline(text) {
    if (text === 'underline') {
      this.textDecoration = this.textDecoration === 'line-through' || this.textDecoration === 'none' ? 'underline' : 'none';
    } else {
      this.textDecoration = this.textDecoration === 'underline' || this.textDecoration === 'none' ? 'line-through' : 'none';
    }
  }


}




